<template>
    <el-card class="reservation-card">
        <div class="card-image" v-if="reservation.locationPhoto">
            <img :src="reservation.locationPhoto" alt="Location Image" />
        </div>
        <div class="card-content">
            <p><strong>创建时间:</strong> {{ formattedCreateTime }}</p>
            <p><strong>预约时间:</strong> {{ formattedReservationTime }}</p>
            <p><strong>预约地点:</strong> {{ reservation.locationName }}</p>
            <p><strong>预留电话:</strong> {{ reservation.userPhone }}</p>
            <p><strong>预约状态:</strong> <span class="status">{{ reservation.type }}</span></p>
            <div class="button-group">
                <el-button v-if="canCancel" type="danger" @click="cancelReservation(reservation.id)">取消预约</el-button>
                <el-button type="warning" @click="deleteReservation(reservation.id)">删除预约</el-button>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import { computed } from 'vue';
import { cancelAppointmentService, deleteReservationService } from '@/api/locationrecord'; // 确保路径正确
import { ElMessage } from 'element-plus'; // 引入 Element Plus 提示信息模块

const props = defineProps({
    reservation: {
        type: Object,
        required: true
    }
});

// 格式化创建时间
const formattedCreateTime = computed(() => {
    return new Date(props.reservation.createTime).toLocaleString(); // 根据需要调整格式
});

// 格式化预约时间
const formattedReservationTime = computed(() => {
    return new Date(props.reservation.time).toLocaleString(); // 根据需要调整格式
});

// 当前预约状态可以取消的条件
const canCancel = computed(() => {
    return !['系统取消', '个人取消'].includes(props.reservation.type);
});

// 取消预约
const cancelReservation = async (id) => {
    try {
        await cancelAppointmentService(id);
        ElMessage.success('预约已取消！');
        refreshComponent(); // 重新加载组件数据
    } catch (error) {
        console.error('取消预约时出错:', error);
        ElMessage.error('取消预约失败！');
    }
};

// 删除预约
const deleteReservation = async (id) => {
    const confirmDelete = confirm('您确定要删除这个预约记录吗？');
    if (confirmDelete) {
        try {
            await deleteReservationService(id);
            ElMessage.success('预约记录已删除！');
            refreshComponent(); // 重新加载组件数据
        } catch (error) {
            console.error('删除预约记录时出错:', error);
            ElMessage.error('删除预约记录失败！');
        }
    }
};

// 重新加载数据的函数，您可能需要根据组件的具体实现替换此函数
const refreshComponent = () => {
    // 这里执行刷新逻辑，比如更新父组件状态以重新获取列表
    // 您可以通过 emit 或者某种状态管理方式来实现
};
</script>

<style scoped>
.reservation-card {
    width: 100%;
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    overflow: hidden; /* 防止内容溢出 */
    transition: transform 0.2s; /* 平滑悬停效果 */
}

.card-image {
    width: 100%;
    height: 150px; /* 适当的高度 */
    overflow: hidden; /* 隐藏超出部分 */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例，并裁剪 */
    transition: transform 0.3s; /* 图像悬停效果 */
}

.card-image img:hover {
    transform: scale(1.05); /* 悬停时放大效果 */
}

.card-content {
    padding: 20px;
    background: #f9f9f9; /* 背景色 */
}

.button-group {
    margin-top: 20px; /* 按钮组上边距 */
    display: flex; /* 使用 flexbox */
    justify-content: center; /* 居中 */
}

.button-group el-button {
    margin: 0 10px; /* 按钮间隔 */
}

.status {
    font-weight: bold; /* 状态加粗 */
    color: #ff6600; /* 预约状态颜色 */
    text-transform: capitalize; /* 首字母大写 */
}

/* 弹出效果 */
.reservation-card:hover {
    transform: translateY(-5px); /* 悬停时向上浮动 */
}
</style>
